<template>
  <Dialog
    title="选择Adx审核"
    :width="600"
    :visible.sync="propVisible"
    @close="hanldeClose"
  >
    <el-form
      class="u-pt10 u-pl20 u-pr20"
      :model="passData"
      :rules="passRules"
      ref="passForm"
    >
      <el-form-item class="u-mb0">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkedAll"
          @change="handleCheckedAll"
        >全部</el-checkbox>
      </el-form-item>
      <el-form-item prop="checkedValue">
        <el-checkbox-group
          v-model="passData.checkedValue"
          @change="handleChecked"
        >
          <el-checkbox
            v-for="item in adxOptions"
            :label="item.id"
            :key="item.id"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item align="center">
        <el-button
          type="primary"
          size="small"
          @click="hanldeConfirm"
        >确 定</el-button>
        <el-button
          class="u-ml20"
          size="small"
          @click="hanldeClose"
        >取 消</el-button>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script>
import Dialog from "@/components/dialog";
import { fetchAdxSelect } from "@/api";
export default {
  name: "AuditPass",
  components: {
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      propVisible: this.visible,
      isIndeterminate: false,
      checkedAll: false,
      adxOptions: [],
      passData: {
        checkedValue: []
      },
      passRules: {
        checkedValue: {
          type: "array",
          required: true,
          message: "请选择ADX",
          trigger: "change"
        }
      }
    };
  },
  watch: {
    visible(v) {
      this.propVisible = v;
    }
  },
  methods: {
    // adx
    fetchAdxSelect() {
      return fetchAdxSelect({
        query: {
          unionId: 0 // adx，默认
        }
      }).then(res => {
        this.adxOptions = res.data.list;
      });
    },
    handleCheckedAll(checked) {
      this.passData.checkedValue = checked
        ? this.adxOptions.map(item => item.id)
        : [];
      this.isIndeterminate = false;
    },
    handleChecked(value) {
      let count = value.length;
      this.checkedAll = count === this.adxOptions.length;
      this.isIndeterminate = count > 0 && count < this.adxOptions.length;
    },
    hanldeConfirm() {
      this.$refs.passForm.validate(valid => {
        if (valid) {
          this.$emit("confirm", this.passData.checkedValue);
        } else {
          return false;
        }
      });
    },
    hanldeClose() {
      this.propVisible = false;
      this.$emit("update:visible", false);
    }
  },
  created() {
    this.fetchAdxSelect();
  }
};
</script>